<template>
  <!--   多头报告-->
  <div>
    <div style="display: flex;padding: 10px 30px">
      <div style="margin-right: 50px">
        <span class="font">{{ $t('手机号对应身份证数') }} : </span>
        <span>{{ dtOldSourceAnalysisMobileVo.didcardNum }}</span>
      </div>
      <div>
        <span class="font">{{ $t('身份证对应手机号数') }} : </span>
        <span>{{ dtOldSourceAnalysisCardNoVo.dmobileNum }}</span>
      </div>

    </div>
    <div>
      <div style="padding: 0px 30px 15px 30px;background-color: #FFFBED;border-top: 1px solid #EEEEEE;">
        <h4 style="color:#FF8A00 ">{{ $t('手机号分析') }} :</h4>
        <el-row :gutter="24" style="margin-bottom: 15px">
          <el-col :span="12">
            <span>{{ $t('最近一次打款时间') }} : </span>
            <span>{{ dtOldSourceAnalysisMobileVo.lastPayTime }}</span>
          </el-col>
          <el-col :span="12">
            <span>{{ $t('最近一次打款金额') }} : </span>
            <span>{{ dtOldSourceAnalysisMobileVo.lastPayAmount }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <span>{{ $t('最近一次还款时间') }} : </span>
            <span>{{ dtOldSourceAnalysisMobileVo.lastRepayTime }}</span>
          </el-col>
          <el-col :span="12">
            <span>{{ $t('最近一次逾期时间') }} : </span>
            <span>{{ dtOldSourceAnalysisMobileVo.lastDealyTime }}</span>
          </el-col>
        </el-row>
      </div>
      <Table border :page="false" :table-column="tableColumn" :table-data="dtOldSourceListMobiles"
             :header-style="{background: '#FFFBED'}" max-height="400px">
        <template slot="first">
          <el-table-column :label="$t('时间')" align="center">
            <template slot-scope="{row}">
              {{ formatTime(row.time) }}
            </template>
          </el-table-column>
        </template>
      </Table>
    </div>
    <div>
      <div style="padding: 0px 30px 15px 30px;background-color: #FFFBED;border-top: 1px solid #EEEEEE;">
        <h4 style="color:#FF8A00 ">{{ $t('身份证分析') }} :</h4>
        <el-row :gutter="24" style="margin-bottom: 15px">
          <el-col :span="12">
            <span>{{ $t('最近一次打款时间') }} : </span>
            <span>{{ dtOldSourceAnalysisCardNoVo.lastPayTime }}</span>
          </el-col>
          <el-col :span="12">
            <span>{{ $t('最近一次打款金额') }} : </span>
            <span>{{ dtOldSourceAnalysisCardNoVo.lastPayAmount }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <span>{{ $t('最近一次还款时间') }} : </span>
            <span>{{ dtOldSourceAnalysisCardNoVo.lastRepayTime }}</span>
          </el-col>
          <el-col :span="12">
            <span>{{ $t('最近一次逾期时间') }} : </span>
            <span>{{ dtOldSourceAnalysisCardNoVo.lastDealyTime }}</span>
          </el-col>
        </el-row>
      </div>
      <Table border :page="false" :table-column="tableColumn" :table-data="dtOldSourceListCardNos"
             :header-style="{background: '#FFFBED'}"  max-height="400px">
        <template slot="first">
          <el-table-column :label="$t('时间')" align="center">
            <template slot-scope="{row}">
              {{ formatTime(row.time) }}
            </template>
          </el-table-column>
        </template>
      </Table>
      <Table border :page="false" :table-column="[{label:$t('描述'),prop:'dataKey'},{label:$t('查询次数'),prop:'dataValue'}]"
             :table-data="thirdPartyData"
             max-height="400px"
             :header-style="{background: '#FFFBED'}">
      </Table>
    </div>
  </div>
</template>

<script>
import {dtOldSource} from '@/api/order'
export default {
  props: ['routesQuery'],
  data() {
    return {
      labelPosition: 'top',
      // 身份证分析
      dtOldSourceAnalysisCardNoVo: {},
      // 手机号分析
      dtOldSourceAnalysisMobileVo: {},
      // 身份证分析列表
      dtOldSourceListCardNos: [],
      // 手机号分析列表
      dtOldSourceListMobiles: [],
      tableColumn: [
        {label: this.$t('申请平台数'), prop: 'applySysNum', width: 150},
        {label: this.$t('打款平台数'), prop: 'paySysNum', width: 150},
        {label: this.$t('打款次数'), prop: 'payNum'},
        {label: this.$t('还款平台数'), prop: 'repaySysNum', width: 150},
        {label: this.$t('还款次数'), prop: 'repayNum'},
        {label: this.$t('展期次数'), prop: 'extNum'},
        {label: this.$t('逾期次数'), prop: 'delayNum'},
      ],
      thirdPartyData: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      const {userStubId} = this.routesQuery
      const res = await dtOldSource({userStubId: userStubId})
      if (res.code === 1 && Object.keys(res.data).length !== 0) {
        const {dtSourceAnalysisCardNoVo, dtSourceAnalysisMobileVo, dtSourceListCardNos, dtSourceListMobiles, thirdPartys} = res.data;
        this.dtOldSourceAnalysisCardNoVo = dtSourceAnalysisCardNoVo
        this.dtOldSourceAnalysisMobileVo = dtSourceAnalysisMobileVo
        this.dtOldSourceListCardNos = dtSourceListCardNos.filter(item => {
          if (Object.keys(item).length !== 0) return item
        })
        this.dtOldSourceListMobiles = dtSourceListMobiles.filter(item => {
          if (Object.keys(item).length !== 0) return item
        })
        this.thirdPartyData = thirdPartys || []
      }
    },
    formatTime(text) {
      let value = '';
      switch (text) {
        case 'D1' :
          value = this.$t('近一天');
          break;
        case 'D3' :
          value = this.$t('近三天');
          break;
        case 'D7' :
          value = this.$t('近一周');
          break;
        case 'D14' :
          value = this.$t('近两周');
          break;
        case 'D30' :
          value = this.$t('近三十天');
      }
      return value;
    }
  }
}
</script>

<style scoped>
.font {
  font-weight: 600;
}
</style>
